<template>
  <popup ref="popup_important">
    <view class="constract_important_popup_box">
      <view class="title">重要事项确认</view>

      <view>
        <collapse
          v-for="(item, index) in dataList"
          :key="index"
          :title="`${index + 1}、${item.contractConfirmMsg}`"
          :content="item.contractConfirmContent"
        />
      </view>

      <view class="options">
        <view class="choose" v-if="!props.disabled">
          <view class="bth" @click="close"> 取消确认 </view>
          <view class="bth warn" @click="submit"> 我已确认 </view>
        </view>

        <view class="choose" v-else>
          <view class="bth go_back" @click="submit"> 我已确认 </view>
        </view>
      </view>
    </view>
  </popup>
</template>

<script lang="ts" setup>
import collapse from '@/components/layout/collapse/collapse.vue'
import { ReqContractImportantConfirm } from '@/api/contract'
import popup from '@/components/common/popup/popup.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { ContractConfirmTypeEnum } from '@/config/enum/enum'
import { ReqSelectAllByCategory } from '@/api/contractConfirm'
import type { ContractConfirm } from '@/config/data/data'

// //接受父组件参数
const props = defineProps({
  /**
   * 合同编号id
   */
  id: {
    type: Number,
    default: 0,
  },
  /**
   * 是否禁用
   */
  disabled:{
    type: Boolean,
    default: false,
  }
})

//自定义事件
const emit = defineEmits<{
  /**
   * 提交变更事件
   * @param state: 变更后的状态
   */
  (e: 'onSubmit', state: number): void
}>()



//获取弹窗组件实例
const popup_important = ref<InstanceType<typeof popup> | null>(null)

//提交确认
const submit = () => {
  if(props.disabled){
    close()
    return
  }
  ReqContractImportantConfirm({ id: props.id })
    .then((res) => {
      uni.showLoading({
        title: '确认中...',
        mask: true,
      })
      if (res.code == 200) {
        uni.showToast({
          title: res.data ? '确认成功' : '确认失败',
          icon: 'none',
          mask: true,
        })
        emit('onSubmit', res.data ? 1 : 0)
      }
    })
    .finally(() => {
      close()
      uni.hideLoading()
    })
}

//数据列表
const dataList = ref<ContractConfirm[]>([])

//打开
const open = () => {
  popup_important.value?.open()
}

//关闭
const close = () => {
  popup_important.value?.close()
}

defineExpose({
  open,
  close,
})

//页面加载
onLoad(() => {
  ReqSelectAllByCategory({ category: ContractConfirmTypeEnum.IMPORTANT }).then(
    (res) => {
      if (res.code == 200 && res.data) {
        dataList.value = res.data
      }
    }
  )
})
</script>

<style scoped lang="scss">
.constract_important_popup_box {
  width: 100%;
  height: 90vh;
  
  background-color: $uni-bg-color-grey;

  .title {
    position: sticky;
    top: 0;
    left: 0;
    text-align: center;
    padding-bottom: 20rpx;
    background-color: #fff;
    color: rgb(249, 191, 54);
    font-weight: 700;
    font-size: 32rpx;
    z-index: 2;
  }


  .options {
    width: 100%;
    height: 146rpx;
  }

  .choose {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 30rpx 50rpx;
    width: calc(100% - 100rpx);
    height: 86rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $uni-bg-color;

    .bth {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 40%;
      color: rgb(247, 174, 49);
      background-color: rgba(243, 220, 181, 0.439);
      border-radius: 43rpx;
      transition: all 0.2s;

      &:active {
        opacity: 0.8;
      }
    }

    
    .go_back {
      width: 100% !important;
    }

    .warn {
      color: #fff;
      background-color: rgb(247, 174, 49);
    }
  }
}
</style>
